<template>
	<view class="content">
		<p class='fan' @click="go" v-show="flag">返回顶部</p>
		<view class="sou">
			<input class="weui-input" auto-focus placeholder="搜索" @click="search"/>
		</view>
		<!-- image_src -->
		<swiper indicator-dots 	indicator-active-color="#cc0003" autoplay interval="3000">
			<swiper-item item-id v-for="(item,index) in title" :key="index">
				<img :src="item.image_src">
			</swiper-item>
		</swiper>
		<view class="dao">
			<view class="doahuang" v-for="(item,index) in dao" :key="index">
				<img :src="item.image_src">
			</view>
		</view>
		<view class="da" v-for="(item,index) in daos" :key="index">
			<view class="yiji">
				<img :src="item.floor_title.image_src" alt="">
			</view>
			<view class="erji">
				<view class="left">
					<img :src="item.product_list[0].image_src" alt="">
				</view>
				<view class="right">
					<view class="left1">
						<view class="sf">
							<img :src="item.product_list[1].image_src" alt="">
						</view>
						<view class="sf">
							<img :src="item.product_list[2].image_src" alt="">
						</view>
					</view>
					<view class="right1">
						<view class="sf1">
							<img :src="item.product_list[3].image_src" alt="">
						</view>
						<view class="sf1">
							<img :src="item.product_list[4].image_src" alt="">
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import http from "../../http/http.js"
	export default {
		data() {
			return {
				title: [],
				dao:[],
				daos:[],
				flag:false
			}
		},
		onLoad() {
			this.lunobo()
			this.wes()
			this.sdw()
		},
		onPageScroll(e){
			// console.log(e);
			var obj=wx.getSystemInfoSync()
			if(e.scrollTop>obj.windowHeight){
				this.flag=true
			}else{
				this.flag=false
			}
		},
		methods: {
			async lunobo(){
				let {data:res} = await http.get("https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata")
				this.title=res.message
			},
			
			async wes(){
				let {data:res} = await http.get("https://api-hmugo-web.itheima.net/api/public/v1/home/catitems")
				this.dao=res.message
			},
			
			async sdw(){
				let {data:res} = await http.get("https://api-hmugo-web.itheima.net/api/public/v1/home/floordata")
				this.daos=res.message
			},
			go(){
				wx.pageScrollTo({
				  scrollTop: 0,
				  duration: 300
				})
			},
			search(){
				wx.navigateTo({url:"/pages/sou/sou"})
			}
		}
	}
</script>

<style lang="scss">
.fan{
	width: 100%;
	height: 60rpx;
	background-color: #5500ff;
	position: fixed;
	text-align: center;
	line-height: 60rpx;
}
.sou{
	width: 100%;
	height: 120rpx;
	background-color: #cc0003;
	text-align: center;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.weui-input{
	background-color: #ffffff;
	height: 100rpx;
	width: 80%;
	border-radius: 20rpx;
}
swiper{
	height: 400rpx;
	img{
		width: 100%;
		height: 100%;
	}
}
.dao{
	display: flex;
	margin-top: 20rpx;
	flex-direction: row;
	justify-content: space-around;
	.doahuang{
		img{
			width: 200rpx;
			height: 200rpx;
		}
	}
}
.da{
	margin-top: 20rpx;
	.yiji{
		width: 100%;
		height: 50rpx;
		img{
			height: 100%;
		}
	}
	.erji{
		width: 100%;
		height: 500rpx;
		display: flex;
		.left{
			width: 45%;
			height: 100%;
			// background-color: #cc0003;
			img{
				width: 95%;
				height: 98%;
			}
		}
		.right{
			flex: 1;
			display: flex;
			flex-direction: column;
			.left1{
				width: 100%;
				height: 60%;
				display: flex;
				.sf{
					flex: 1;
					img{
						width: 95%;
						height: 95%;
					}
				}
			}
			.right1{
				flex: 1;
				display: flex;
				.sf1{
					flex: 1;
					img{
						width: 95%;
						height: 95%;
					}
				}
			}
		}
	}
}
</style>
